<template>
  <a-modal
    title="批量新增房屋"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="所属项目" >
          <a-select @change="(value,option) => projectHandleSelectChange(value,option)"
                    v-decorator="['projectName', {}]">
            <a-select-option v-for="(projectName,index) in this.projectSelectOption" :key="index" :value="projectName">
              {{projectName}}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="所在区域">
          <a-select @change="(value,option) => regionHandleSelectChange(value,option)"  v-decorator="['regionName', {}]">
            <a-select-option v-for="(regionInfo,index) in this.regionSelectOption" :key="regionInfo.num" :value="regionInfo.name">
              {{regionInfo.name}}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="起始楼层">
          <a-input placeholder="请输入-5-999范围内的数字" v-decorator="['floorBegin', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="到达楼层">
          <a-input placeholder="请输入-5-999范围内的数字" v-decorator="['floorEnd', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="每层房屋数">
          <a-input placeholder="请输入1-99范围内的数字" v-decorator="['housesPerFloor', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="门牌号前缀">
          <a-input placeholder="请输入门牌号前缀" v-decorator="['houseNumPre', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="门牌号">
          <a-input placeholder="请输入门牌号前缀" v-decorator="['houseNum', {}]" />
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="备注">
          <a-input placeholder="请输入门牌号前缀" v-decorator="['remark', {}]" />
        </a-form-item>

      </a-form>
    </a-spin>

  </a-modal>
</template>

<script>
import {postAction} from '@/api/manage'
import { httpAction } from '@/api/manage'

export default {
  components: {},
  props: ['projectSelectOption','regionSelectOption'],
  data() {
    return {
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading:false,
      form: this.$form.createForm(this),
      validatorRules:{
        projectId:{rules: [{ required: true, message: '请输入项目id!' }]},
      },

      url: {
        batchAdd: "/houses/houses/batchAdd",
      },
    };
  },
  methods:{
    handleOk(){
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let formData = Object.assign(this.model, values);
          console.log("数据："+formData)

          postAction(this.url.batchAdd,formData).then((res)=>{
            if(res.success){
              that.$message.success(res.message);
              that.$emit('ok');
            }else{
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }
      })
    },
    handleCancel(){
      this.close()
    },
    close () {
      this.$emit('close');
      this.visible = false;
    },
    regionHandleSelectChange(value,p2){

    },
    projectHandleSelectChange(value,p2){
    },
  }
}
</script>

<style lang="less" scoped>

</style>